<template>
  <div class="content">
    <div class="dept_nav">
      <div class="dnav_into">
        <i class="icon4 icon_sort"></i>
        科室分类
      </div>
      <div class="dnav_list" :class="{ dnav_block: route.path == '/home' }">
        <div class="dnav" v-for="item in deptClsList" :key="item.name">
          <i class="icons"></i>{{ item.name }}
          <div class="dnav_sec">
            <div
              class="sec_con"
              v-for="item1 in item.deptClsList"
              :key="item1.name"
            >
              <div class="fenlei mouse_over">
                {{ item1.name }}
              </div>
              <div class="jibing">
                <span
                  class="mouse_over2 list"
                  v-for="item2 in item1.diseaseList"
                  :key="item2.name"
                >
                  {{ item2.name }}
                </span>
                <span class="mouse_over2">更多疾病>></span>
              </div>
            </div>
          </div>
        </div>
        <div class="dnav">
          <i class="icon4 icons icon_sort"></i>
          更多
        </div>
      </div>
    </div>
    <div class="nav_list">
      <div
        v-for="(item, index) in navList"
        :class="{ nav_active: item.path == route.path }"
        @click="changeNav(item)"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { CODE } from "@/utils/StatusCode";
import { DeptCls } from "@/types/entity";
import { getDeptClsList } from "@/api/home";

const router = useRouter();
const route = useRoute();

onMounted(() => {
  getDeptCls();
});

const dnavList = [
  {
    name: "内科",
    icon: require("../assets/image/79a0aa343086474d9873ba502e5236ad.png"),
  },
  {
    name: "外科",
    icon: require("../assets/image/6bc80754e4fd4371880425249c1e58db.png"),
  },
  {
    name: "妇科",
    icon: require("../assets/image/79fc23b22fa14e398010152fa38844fd.png"),
  },
  {
    name: "产科",
    icon: require("../assets/image/820eebf876d84da198a3d763f3f1f2b1.png"),
  },
  {
    name: "皮肤性病",
    icon: require("../assets/image/377538662d224f038342c81d0c93babe.png"),
  },
  {
    name: "儿科",
    icon: require("../assets/image/6b567c939472403ba25d58157d1bf05d.png"),
  },
];
const navList = [
  { name: "首页", path: "/home" },
  { name: "找医院", path: "/hospital" },
  { name: "问医生", path: "/doctor" },
  { name: "查疾病", path: "/disease" },
  { name: "健康科普", path: "/science" },
  { name: "健康体检", path: "/exam" },
  // { name: "健康必读", path: "/read" },
];

/**
 * 查询科室分类列表
 */
const deptClsList = ref<DeptCls[]>([]);
async function getDeptCls() {
  const res = await getDeptClsList({ parenId: 1, type: 1 });
  if (res.code == CODE.OK) {
    deptClsList.value = res.data;
  }
}
function changeNav(nav: any) {
  router.push(nav.path);
}
</script>
<style lang="less" scoped>
.content {
  display: flex;
  position: relative;
  width: 1200px;
  .dept_nav {
    width: 188px;
    position: relative;
    &:hover {
      .dnav_list {
        display: block;
      }
    }

    .dnav_into {
      height: 40px;
      background-color: #15c37d;
      font-size: 16px;
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      padding-left: 32px;
      .icon_sort {
        width: 17px;
        height: 12px;
        margin-right: 12px;
        background-position: 0 -40px;
      }
    }
    .dnav_list {
      display: none;
      width: 100%;
      position: absolute;
      top: 40px;
      .dnav {
        height: 49px;
        background-color: #2acf8d;
        cursor: pointer;
        display: flex;
        align-items: center;
        color: #fff;
        padding-left: 32px;
        border-top: 1px solid #52d6a2;
        .dnav_sec {
          width: 700px;
          height: 349px;
          background-color: #fff;
          position: absolute;
          left: 188px;
          top: 0;
          z-index: 999;
          border-top-right-radius: 10px;
          border-bottom-right-radius: 10px;
          display: none;
          color: #666666;
          overflow: auto;
          padding: 20px 0 0 20px;
          .sec_con {
            margin-bottom: 30px;
            .fenlei {
              font-size: 16px;
              font-weight: bold;
              margin-bottom: 20px;
            }
            .jibing {
              span {
                font-size: 14px;
                height: 16px;
                line-height: 16px;
                display: inline-block;
              }
              .list {
                margin-right: 15px;
                padding-right: 15px;
                border-right: 1px solid #666666;
              }
            }
          }
        }
        &:hover {
          background-color: #fff;
          color: #2acf8d;
          .dnav_sec {
            display: block;
          }
        }
        .icons {
          height: 20px;
          width: 20px;
          margin-right: 12px;
          background-image: url(../assets/image/79a0aa343086474d9873ba502e5236ad.png);
        }
        .icon_sort {
          background-position: -120px 0;
        }
      }
    }
    .dnav_block {
      display: block;
    }
  }
  .nav_list {
    height: 40px;
    display: flex;
    margin-left: 30px;
    line-height: 40px;
    > div {
      font-size: 18px;
      color: #333333;
      margin-right: 80px;
      cursor: pointer;
      &:hover {
        color: #000;
      }
    }
    .nav_active {
      border-bottom: 4px solid #2acf8d;
      color: #2acf8d;
      font-weight: bold;
    }
  }
}
</style>
